<template>
	<view class="Detail">
		<view class="Detail-box">
			<!-- 上 -->
			<view class="Detail-box-top">
				<!-- 标题 -->
				<view class="title">
					<strong>无人机中型教员</strong>
				</view>
				<!-- 工资 -->
				<view class="wages">
					8-15k
				</view>
				<!-- 信息 -->
				<view class="Information">
					<view class="address">浙江省 杭州市</view>
					<view class="time">三年及以下</view>
				</view>
				<!-- 学历 -->
				<view class="Degree">本科及以上</view>
				<!-- 发布时间 -->
				<view class="Released">18小时前发布</view>

				<!-- 公司信息 -->
				<view class="firm">
					<view class="image"></view>

					<view class="firmInformation">
						<view class="title">
							<b>杭州景峰科技有限公司</b>
						</view>
						<view class="BriefIntroduction">互联网/IT/电子/通信 | 未融资 | 100人以下</view>
					</view>
				</view>
			</view>

			<!-- 下 -->
			<view class="Detail-box-bottom">

				<view class="posts">
					<view class="title">职位描述</view>
					<view class="one">1.负责公司无人机业务课程的迭代、开发；</view>
					<view class="one">2.完成公司无人机业务相关的教学包括但不限于授课及无人机考证；</view>
					<view class="one">3.协助完成无人机课程的教案、课件等辅助资料的编写；</view>
					<view class="one">4.配合其他团队，配合教学需求。</view>
				</view>
				<view class="posts">
					<view class="title">职位描述</view>
					<view class="one">1.负责公司无人机业务课程的迭代、开发；</view>
					<view class="one">2.完成公司无人机业务相关的教学包括但不限于授课及无人机考证；</view>
					<view class="one">3.协助完成无人机课程的教案、课件等辅助资料的编写；</view>
					<view class="one">4.配合其他团队，配合教学需求。</view>
				</view>
			</view>


		</view>

		<!-- 底部框 -->
		<view class="Detail-bottom">
			<view class="share"></view>
			<view class="delivery">
				投递简历
			</view>

		</view>
	</view>
</template>

<script setup>
	// import {
	// 	ref,
	// 	onMounted
	// } from 'vue';
	// import {
	// 	onShow
	// } from '@dcloudio/uni-app';

	// const detail = ref([])

	// const opendbArticles = () => {
	// 	const db = uniCloud.database();
	// 	db.collection("opendb-news-articles").get()
	// 		.then((res) => {
	// 			console.log('detail res', res.result.data);
	// 			detail.value = res.result.data
	// 			console.log('detail-value', detail.value);
	// 		})
	// 		.catch((err) => {
	// 			console.log('detail err', err);
	// 			uni.showToast({
	// 				title: '加载失败，请稍后再试',
	// 				icon: 'none'
	// 			});
	// 		});
	// };

	// onMounted(() => {
	// 	opendbArticles();
	// });
</script>

<style scoped lang="less">
	.Detail {
		background-color: #f6faff;

		.Detail-box {
			// background-color: antiquewhite;
			padding: 25rpx 25rpx 120rpx 25rpx;

			// 上
			.Detail-box-top {
				background-color: white;
				padding: 30rpx 25rpx;
				margin-bottom: 15rpx;
				border-radius: 30rpx;

				// 工资
				.wages {
					color: #52d4ec;
				}

				// 信息
				.Information {
					display: flex;
					color: #adc1cc;
					font-size: 25rpx;
					padding: 15rpx 15rpx;

					.address {
						margin-right: 15rpx;
					}
				}

				// 学历
				.Degree {
					color: #adc1cc;
					font-size: 25rpx;
					padding-bottom: 30rpx;
					padding-left: 15rpx;
				}

				// 发布时间
				.Released {
					color: #adc1cc;
					font-size: 25rpx;
					padding: 15rpx 0;
					border-bottom: 1px solid #f9f9f9;
					text-align: end;
				}

				// 公司信息
				.firm {
					width: 100%;
					height: 100rpx;
					// background-color: #52d4ec;
					display: flex;
					align-items: center;

					//图片
					.image {
						width: 60rpx;
						height: 60rpx;
						background-color: coral;
					}

					.firmInformation {
						padding: 0 20rpx;

						.title {
							margin-bottom: 10rpx;
						}

						.BriefIntroduction {
							color: #adc1cc;
							font-size: 25rpx;
						}
					}


				}
			}

			// 下
			.Detail-box-bottom {
				background-color: white;
				padding: 30rpx 25rpx;
				border-radius: 30rpx;
				color: #adc1cc;

				font-size: 25rpx;

				.posts {
					margin-bottom: 25rpx;

					.title {
						padding-bottom: 10rpx;
					}

					.one {
						line-height: 55rpx;
					}
				}
			}

		}

		.Detail-bottom {
			padding: 25rpx 30rpx;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			position: sticky;
			bottom: 0;
			.share {
				width: 60rpx;
				height: 60rpx;
				background-color: orange;
			}

			.delivery {
				padding: 20rpx 200rpx;
				background-color: #00bbc8;
				font-size: 25rpx;
				color: white;
			}
		}
	}
</style>